{% extends "base.html" %}
  {% block content %}
  <div id="page-wrapper">
     <div class="row">
         <div class="col-lg-12">
             <h2 class="page-header">Manage Highstate</h2>
         </div>
         <!-- /.col-lg-12 -->
     </div>
     <!-- /.row -->
     <div class="row">
         <div class="col-lg-12">
             <div class="panel panel-default">
                 <div class="panel-heading">
                     Highstate
                     <div class="btn-group" style="float:right">
                           <button type="button" class="btn btn-outline btn-success btn-xs dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                           Action <span class="caret"></span>
                           </button>
                           <ul class="dropdown-menu">
                             <li><a id="add_sls" href="#"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> | Add </a></li>
                             <li role="separator" class="divider"></li>
                             <li><a id="modify_sls" href="#"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span> | Modify </a></li>
                             <li role="separator" class="divider"></li>
                             <li><a id="delete_sls" href="#"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span> | Delete </a></li>
                           </ul>
                           <!-- begin all modal  -->

                           <!-- add  modal -->
                           <div id="add_modal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
                             <div class="modal-dialog modal-lg">
                               <div class="modal-content">
                                 <div class="modal-header">
                                   <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                   <h4 class="modal-title" id="exampleModalLabel">Add</h4>
                                 </div>
                                 <div class="modal-body">
                                   <form class="form-horizontal" id="add_data" method="post" action="/states_config/add_sls/">
                                     <fieldset>
                                       <div class="form-group">
                                         <label for="name" class="col-sm-3 control-label">Name</label>
                                         <div class="col-sm-9">
                                           <input class="form-control" id="name" name="name" minlength="1" type="text" placeholder="name" required>
                                         </div>
                                       </div>

                                       <div class="form-group">
                                         <label for="content" class="col-sm-3 control-label">Content</label>
                                         <div class="col-sm-9">
                                           <textarea class="form-control" rows="15" id="content" name="content" minlength="1" type="content" placeholder="the content of sls" required> </textarea>
                                         </div>
                                       </div>

                                       <div class="form-group">
                                         <label label for="business" class="col-sm-3 control-label">Business</label>
                                         <div class="col-sm-offset-4 col-sm-8">
                                           <div class="checkbox">
                                               {% if businesses %}
                                               {% for b in businesses %}
                                               <input  type="checkbox" name="business" value={{ b.name }}> {{ b.name }}<br>
                                               {% endfor %}
                                               {% else %}
                                               <input  type="checkbox" name="business" value='unkonwn'> unknown <br>
                                               {% endif %}
                                           </div>
                                         </div>
                                       </div>

                                       <div class="form-group">
                                         <label for="infomations" class="col-sm-3 control-label">Informations</label>
                                         <div class="col-sm-9">
                                           <textarea class="form-control" id="informations" name="informations" minlength="1"  placeholder=""> </textarea>
                                         </div>
                                       </div>

                                       <div class="form-group">
                                         <div class="col-sm-offset-3 col-sm-9">
                                           <div class="checkbox">
                                             <label>
                                               <input type="checkbox" name="enabled" value="true">Enabled
                                             </label>
                                           </div>
                                         </div>
                                       </div>

                                       <div class="form-group">
                                         <div class="col-sm-offset-3 col-sm-9">
                                           <button onclick="submit" id="add_commit" type="submit" class="btn btn-outline btn-success btn-xs">Submit</button>
                                         </div>
                                       </div>
                                     </fieldset>
                                   </form>
                                 </div>
                               </div>
                             </div>
                           </div>
                     </div>
                       <!-- end add  modal -->

                       <!-- delete  modal -->
                       <div id="delete_modal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
                         <div class="modal-dialog modal-lg">
                           <div class="modal-content">
                             <div class="modal-header">
                               <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                               <h4 class="modal-title" id="exampleModalLabel">Are You Sure?</h4>
                             </div>
                             <div class="modal-body">
                               <form id="delete_data" class="form-inline" method="POST" action="/states_config/del_sls/">
                               <!-- jquery will append content here -->
                               </form>
                             </div>
                             <div class="modal-footer">
                               <button type="button" class="btn btn-outline btn-warning btn-xs" data-dismiss="modal">Close</button>
                               <button id="delete_commit" type="button" class="btn btn-outline btn-danger btn-xs" data-dismiss="modal" >Delete</button>
                             </div>
                           </div>
                         </div>
                       </div>
                       <!-- end delete   -->

                       <!-- modify -->
                       <div id="modify_modal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
                         <div class="modal-dialog modal-lg">
                           <div class="modal-content">
                             <div class="modal-header">
                               <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                               <h4 class="modal-title" id="exampleModalLabel">Modify</h4>
                             </div>
                             <div class="modal-body">

                               <form id="modify_data" class="form-horizontal" method="POST" action="/states_config/modify_sls/">

                                   <div class="form-group">
                                     <label for="name" class="col-sm-3 control-label">Id</label>
                                     <div class="col-sm-9">
                                       <input readonly class="form-control" id="id" name="id" minlength="1" type="text" placeholder="id" required>
                                     </div>
                                   </div>

                                   <div class="form-group">
                                     <label for="name" class="col-sm-3 control-label">Name</label>
                                     <div class="col-sm-9">
                                       <input class="form-control" id="name" name="name" minlength="1" type="text" placeholder="name" required>
                                     </div>
                                   </div>

                                   <div class="form-group">
                                     <label for="content" class="col-sm-3 control-label">Content</label>
                                     <div class="col-sm-9">
                                       <textarea class="form-control" rows="15" id="content" name="content" minlength="1" type="content" placeholder="the content of sls" required> </textarea>
                                     </div>
                                   </div>

                                   <div class="form-group">
                                     <label label for="business" class="col-sm-3 control-label">Business</label>
                                     <div class="col-sm-offset-4 col-sm-8">
                                       <div class="checkbox">
                                           {% if businesses %}
                                           {% for b in businesses %}
                                           <input  type="checkbox" name="business" value={{ b.name }}> {{ b.name }}<br>
                                           {% endfor %}
                                           {% else %}
                                           <input  type="checkbox" name="business" value='unkonwn'> unknown <br>
                                           {% endif %}
                                       </div>
                                     </div>
                                   </div>

                                   <div class="form-group">
                                     <label for="informations" class="col-sm-3 control-label">Informations</label>
                                     <div class="col-sm-9">
                                       <textarea class="form-control" id="informations" name="informations" minlength="1"  placeholder=""> </textarea>
                                     </div>
                                   </div>

                                   <div class="form-group">
                                     <div class="col-sm-offset-3 col-sm-9">
                                       <div class="checkbox">
                                         <label>
                                           <input type="checkbox" id="enabled" name="enabled" value="true">Enabled
                                         </label>
                                       </div>
                                     </div>
                                   </div>

                             </div>
                             <div class="modal-footer">
                               <button type="button" class="btn btn-outline btn-warning btn-xs" data-dismiss="modal">Close</button>
                               <button id="modify_commit" type="button" class="btn btn-outline btn-primary btn-xs" data-dismiss="modal" >Save</button>
                             </div>
                             </form>
                           </div>
                         </div>
                       </div>
                       <!-- end modify  -->

                       <!-- checkbox error modal -->
                       <div id="checkbox_error_modal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
                         <div class="modal-dialog modal-lg">
                           <div class="modal-content">
                             <div class="modal-content">
                               <div class="modal-header">
                                 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                               </div>
                               <div class="modal-body">
                                 <h4 class="modal-title" id="checkbox_error">There is no item selected</h4>
                               </div>
                             </div>
                           </div>
                         </div>
                       </div>
                       <!-- end checkbox page error -->

                       <!-- alert error modal -->
                       {% if error %}
                       <div id="error_modal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
                         <div class="modal-dialog modal-lg">
                           <div class="modal-content">
                             <div class="modal-content">
                               <div class="modal-header">
                                 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                               </div>
                               <div class="modal-body">
                                 <h4 class="modal-title" id="error">{{ error }}</h4>
                               </div>
                             </div>
                           </div>
                         </div>
                       </div>
                       {% endif %}
                       <!-- end alert error modal  -->

                       <!-- alert success modal -->
                       {% if success %}
                       <div id="success_modal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
                         <div class="modal-dialog modal-lg">
                           <div class="modal-content">
                             <div class="modal-content">
                               <div class="modal-header">
                                 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                               </div>
                               <div class="modal-body">
                                 <h4 id="success" class="modal-title">{{ success }}</h4>
                               </div>
                             </div>
                           </div>
                         </div>
                       </div>
                       {% endif %}
                       <!-- end alert success modal  -->
                 </div> 
                 <!-- /.panel-heading -->
                    <div class="panel-body">
                        <div class="dataTable_wrapper">
                            <label><a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" style="text-decoration:none">Target</a></label>
                            <form id="run_sls" method="post" action="/states_config/highstate_result/" target="iframepage">     <!-- target iframe refresh highstate_result.html -->
                                <div id="collapseOne" class="panel-collapse collapse on">
                                    <div class="panel-body" style="padding:0px">
                                        <table class="table table-striped table-bordered table-hover">
                                            <tr>
                                                <td>
                                                   <label>Groups</label>
                                               </td>
                                               <td>
                                                   <label>Hosts</label>
                                               </td>
                                            </tr>
                                            {% for groups,hosts in list_groups.items %}
                                            <tr>
                                                <td style="white-space: nowrap;">
                                                   <div class="checkbox-inline" style="margin-left:7px">
                                                      <input  id="{{ groups }}"  onclick="selectAll('{{ groups }}')" type="checkbox" value="">{{ groups }}
                                                   </div>
                                                </td>
                                                <td>
                                                   {% for host in hosts %}
                                                       <div class="checkbox-inline" name="checkedhost">
                                                           <input class="{{ groups }}" name="hosts_name"  onclick="selectAll()" type="checkbox" value="{{ host }}" >{{ host }}
                                                       </div>
                                                   {% endfor %}
                                               </td>
                                            </tr>
                                           {% endfor %}
                                        </table>
                                    </div>
                                </div>

                        </div>
                        <label style="text-decoration:none">SLS</label>
                        <div class="panel panel-default">
                         <div class="panel-body">
                         <div class="dataTable_wrapper">
                         <table id="datatable-demo" class="table table-striped table-bordered table-hover" cellspacing="0" width="100%">
                             <thead>
                                 <tr>
                                    <th>
                                      <input id="CHKall" type="checkbox" name="CHKall" value="CHKall"></input>
                                    </th>
                                    <th>ID</th>
                                    <th>Name</th>
                                    <th>Content</th>
                                    <th>Business</th>
                                    <th style="display: none">Information</th>
                                    <th>Enabled</th>
                                    <th>Opearation</th>
                                 </tr>
                             </thead>
                             <tbody>
                               {% if slses %}
                               {% for s in slses %}
                               <tr id="{{ s.id }}" class="even gradeC">
                                   <td>
                                     <input  name="CHKlist" type="checkbox" value="{{ s.id }}"></input>
                                   </td>
                                   <td id="id" style="word-break:break-all">{{ s.id }}</td>
                                   <td id="name" style="word-break:break-all" value="{{ s.name }}">{{ s.name }}</td>
                                   <td style="word-break:break-all"><textarea id="content" rows="1" style="padding:0px;font-size: 10px">{{ s.content }}</textarea></td>
                                   <td id="business" style="word-break:break-all">{% for b in s.business.all %}{{ b.name }} {% endfor %}</td>
                                   <td id="informations" style="word-break:break-all;display: none">{{ s.informations }}</td>
                                   <td id="enabled" style="word-break:break-all">{{ s.enabled|lower }}</td>
                                   <td>
                                       <button  form="run_sls" id="execute" name="execute" value={{ s.name }} type="submit" type="button" class="btn btn-outline btn-success btn-xs">Execute</button>
                                       <!--<button  form="run_sls" id="test" name="test" value={{ s.name }} type="submit" type="submit" class="btn btn-outline btn-primary btn-xs">Test</button>-->
                                   </td>
                               </tr>
                               {% endfor %}
                               {% endif %}
                             </tbody>
                         </table>
                     </div>
                    </div>
                    </div>
                    </form>
                    <div class="form-group" style="margin-bottom: 5px">
                        <div class="form-group">
                            <label>Command Result</label>
                            <iframe src="/states_config/highstate_result/"  marginheight="0" marginwidth="0" frameborder="0" scrolling="no" width="100%" height=100% id="iframepage" name="iframepage" onLoad="iFrameHeight()"></iframe>
                        </div>
                    </div>
                 <!-- /.panel-body -->
             </div>
             <!-- /.panel -->
             </div> 
             <!-- /.panel-default -->
         </div>
         <!-- /.col-lg-12 -->
     </div>
     <!-- /.row -->
   </div>
        <!-- /#page-wrapper -->

  {% endblock %}
    {% block jquery%}
    <script type="text/javascript">
      $(document).ready(function(){
        //全选或全不选 
        $("#CHKall").click(function(){
            if(this.checked){    
                $("input[name='CHKlist']").prop("checked", true);   
            }else{    
                $("input[name='CHKlist']").prop("checked", false); 
            }    
         });  
        // end slelect all

        //data table
        $("#datatable-demo").DataTable( {
           //设置第一列为初始化排序的列
           "order": [[ 1, "desc" ]],
           //该值的含义为。初始化datatable，但对序号为0,10列的列不进行排序，别的列均可进行排序 
           "aoColumnDefs": [ { "bSortable": false, "aTargets": [ 0,5 ] }]
           });     
        // end data table
        // add //
        $("#add_sls").click(function(){
            $('#add_modal').modal('show')

            $("#add_commit").click(function(){
                $("#add_data").submit()
            });
            
            });
        // end add //


        // delete //
        $("#delete_sls").click(function(){
           var ids=[];
           $('input[name="CHKlist"]:checked').each(function(){
               var id=$(this).val();
               ids.push(id);
           }); 
           if (ids.length >0)
               {
               $("#delete_data").empty()
               for (i in ids){     
                   $("#delete_data").append(
                       '<div class="form-group"><label class="control-label">ID: </label><input readonly name="id" value="'+ ids[i] +'" type="text" class="form-control"></input></div> <br>'
                       );
                   };
                 $('#delete_modal').modal('show')
               }
             else 
                {
                   $('#checkbox_error_modal').modal('show')
                }
           $("#delete_commit").click(function(){
                 $("#delete_data").submit()
             });
      });
      // end delete //

      // modify //
      $("#modify_sls").click(function(){
          var ids=[];
          $('input[name="CHKlist"]:checked').each(function(){
              var id=$(this).val();
              ids.push(id);
          });
          var tmp_id=ids[0];
          var tmp_name=$("#"+tmp_id).find("#name").text();
          //var tmp_business=$("#"+tmp_id).find("#business").text();
          var tmp_content=$("#"+tmp_id).find("#content").val();
          var tmp_informations=$("#"+tmp_id).find("#informations").text();
          var tmp_enabled=$("#"+tmp_id).find("#enabled").text();
          $('#modify_data').find('input#id').val(tmp_id);
          $('#modify_data').find('input#name').val(tmp_name);
          $('#modify_data').find('textarea#content').val(tmp_content);
          $('#modify_data').find('textarea#informations').val(tmp_informations);
          if (tmp_enabled == "true")
              {
              $('#modify_data').find('input#enabled').attr("checked",true);
              $('#modify_data').find('input#enabled').val(tmp_enabled);
              }
          else
              {
              $('#modify_data').find('input#enabled').attr("checked",false);
              $('#modify_data').find('input#enabled').val(tmp_enabled);
              }

          $('#modify_modal').modal('show')
          $('#modify_commit').click(function(){
              $('#modify_data').submit();
              });
      })
      // end modify //


      // execute sls //
      $('#execute').click(function(){
          /*  
          sls = $(this).parent().parent().children("td:eq(2)").text()
          var obj=document.getElementsByName('hosts_name')
          var hosts = []
          for(var i=0; i<obj.length; i++){
              if (obj[i].checked){
                  var host = obj[i].value
                  hosts.push(host)
              }
            }
          */  
          $('#run_sls').submit();
      })

      //show success and error modal //
      $('#success_modal').modal('show')
      $('#error_modal').modal('show')
      //  end show success and error modal //
    });
      // select all
        function selectAll(group){
           var checklist = document.getElementsByClassName(group);
            //alert(checklist)
           if(document.getElementById(group).checked) {
               for(var i=0;i<checklist.length;i++) {
                     checklist[i].checked = 1;
                  }
           }
           else {
               for(var j=0;j<checklist.length;j++) {
                    checklist[j].checked = 0;
                }
           }
        }

    // iframe
        function iFrameHeight() {
           var ifm= document.getElementById("iframepage");
           var subWeb = document.frames ? document.frames["iframepage"].document :
              ifm.contentDocument;
              if(ifm != null && subWeb != null) {
              ifm.height = subWeb.body.scrollHeight;
              }
        }
    </script>
    {% endblock %}
